<template>
    <div>
        <!-- 直播/未直播切换按钮（仅演示用，可挪到外部） -->
        <div style="margin-bottom:12px">
            <el-button type="primary" @click="toggleLive">
                {{ isLiving ? '结束直播' : '开始直播' }}
            </el-button>
        </div>

        <!-- 未开播 -->
        <div v-if="!isLiving" class="live-data-container">
            <div class="live-status">
                <div class="status-indicator">未直播</div>
            </div>
            <div style="display: flex;justify-content: space-between;">
                <div class="real-time-data">
                    <h3 style="margin: 0;">实时数据</h3>
                    <div class="data-grid">
                        <div class="data-item">
                            <div class="data-label">观看人数</div>
                            <div class="data-value">—</div>
                        </div>
                        <div class="data-item">
                            <div class="data-label">入内停留时长</div>
                            <div class="data-value">—</div>
                        </div>
                        <div class="data-item">
                            <div class="data-label">分享次数</div>
                            <div class="data-value">—</div>
                        </div>
                    </div>
                </div>
                <div class="data-items">
                    <h3 style="margin: 0 20px 0 0">违规提醒</h3>
                    <div class="data-value" style="margin-top: 10px;">—</div>
                </div>
            </div>
            <div class="bottom">
                <div class="left">
                    <h3 style="margin: 0;">实时互动</h3>
                    <div
                        style="display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;height: 70%;">
                        <img src="../assets/image/wu.png" alt="" style="width: 100px;">
                        <div style="font-size: 10px;color: rgb(222, 222, 222);">当前账号暂未开播，开播后可查看</div>
                    </div>
                    <el-input v-model="textarea" maxlength="50" style="width:100%;margin-top:20px" placeholder="请输入评论"
                        show-word-limit type="textarea" />
                </div>
                <div class="right">
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <h4 style="margin: 0;">在线观众</h4>
                        <el-input v-model="search" style="width: 180px" placeholder="请输入用户昵称" :suffix-icon="Search" />
                    </div>
                    <div
                        style="display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;height: 100%;">
                        <img src="../assets/image/wu.png" alt="">
                        <div style="font-size: 10px;color: rgb(222, 222, 222);">当前账号暂未开播，开播后可查看</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 已开播 -->
        <div v-else class="live-data-container">
            <div class="live-status">
                <div class="status-indicator">
                    直播中&nbsp;
                    <div style="color:rgb(61, 122, 221);">· 如何健康有质量的生活</div>
                </div>
                <div style="font-size:12px;color:#666;margin-top:4px">
                    开播时间：2021-12-06 19:44:55
                </div>
            </div>

            <div style="display: flex;justify-content: space-between;">
                <!-- 左侧实时数据 -->
                <div class="real-time-data">
                    <h3 style="margin: 0;">实时数据</h3>
                    <div class="data-grid">
                        <div class="data-item">
                            <div class="data-label">观看人数</div>
                            <div class="data-value">{{ viewers }}</div>
                        </div>
                        <div class="data-item">
                            <div class="data-label">人均停留时长</div>
                            <div class="data-value">{{ stayTime }}min</div>
                        </div>
                        <div class="data-item">
                            <div class="data-label">分享次数</div>
                            <div class="data-value">{{ shares }}</div>
                        </div>
                    </div>
                </div>

                <!-- 右侧违规提醒 -->
                <div class="data-items">
                    <h3 style="margin: 0 20px 0 0">违规提醒</h3>
                    <div class="data-value" style="margin-top: 10px;">
                        <el-button color="red" plain size="small" :style="{ width: '55px' }">虚假宣传</el-button>
                        主播涉及“百分百治病/伪造商品销量”
                    </div>
                </div>
            </div>

            <div class="bottom">
                <!-- 左侧实时互动 -->
                <div class="left">
                    <h3 style="margin: 0;">实时互动</h3>
                    <div class="chat-list">
                        <div v-for="(msg, i) in chatMessages" :key="i" class="chat-item">
                            <span class="uname">{{ msg.name }}：</span>
                            <span class="ucont">{{ msg.text }}</span>

                        </div>
                    </div>
                    <el-input v-model="textarea" maxlength="50" style="width: 100%;margin-top: 10px;"
                        placeholder="请输入评论" show-word-limit type="textarea" @keydown.enter.exact.prevent="sendMsg" />
                </div>

                <!-- 右侧在线观众 -->
                <div class="right">
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <h4 style="margin: 0;">在线观众</h4>
                        <el-input v-model="search" style="width: 180px" placeholder="请输入用户昵称" :suffix-icon="Search" />
                    </div>
                    <div class="viewer-list">
                        <div v-for="item in audience" :key="item.id" class="audience-item">
                            <div class="avatar">
                                <div style="display: flex; align-items: center;">
                                    <img :src="item.img" class="img" />
                                    <span style="margin-left: 10px;">{{ item.name }}</span>
                                </div>
                                <div>
                                    <el-button size="small" style="background-color: rgb(246, 170, 53); color: white;"
                                        @click="handleKick(item)">
                                        踢出
                                    </el-button>
                                    <el-button size="small" :disabled="!!item.timer" :style="{
                                        width: '50px',
                                        backgroundColor: item.timer ? 'rgb(228, 244, 255)' : 'rgb(121, 136, 154)',
                                        color: item.timer ? '#409EFF' : '#fff'
                                    }" @click="handleBan(item)">
                                        {{ item.timer ? item.countText : '禁言' }}
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

import { Search } from '@element-plus/icons-vue'
import { ref, onMounted, onUnmounted, computed, reactive, defineProps, defineEmits, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
/* 直播/未直播开关 */
const isLiving = ref(false)
function toggleLive() {
    isLiving.value = !isLiving.value
}
/* 未开播 */
const search = ref('')
const textarea = ref('')

/* 已开播 */
const viewers = ref(4567)
const stayTime = ref(35)
const shares = ref(45)

/* 聊天列表 */
const chatMessages = ref([
    { name: 'Xujinwen', text: '欢迎来到我的直播间~', banned: false },
    { name: 'mosquito', text: '晚安23:42，我恢复了原来的样子，', banned: false },
    { name: '夏天', text: '那些后来躺在黑名单的人，最开始也都是踏着七彩祥云而来', banned: false },
    { name: '小靖天', text: '没人会为你感同身受，都是自己痛苦后的', banned: false },
    { name: 'aidi&大雯雯', text: '如果我不曾走过这一遍 突然觉得这句歌词', banned: true },
    { name: '乐您悠', text: '穿一次白裙子给你看', banned: true },
    { name: '橙子味大叔', text: '遇到喜欢的歌就下载下来吧，因为万一有一天', banned: true },
    { name: '小陆', text: '你问人问题，她答非所问，便已是答了，毋需', banned: false },
    { name: 'Dn', text: '她不会对你的偶尔庸俗感到厌烦，你也不用去', banned: false },
    { name: '赵嘉', text: '有时候，如果和很重要的人发消息，他一直没', banned: true },
    { name: '值得', text: '', banned: true },
    { name: '时光U', text: '', banned: true },
])

/* 在线观众列表 */
const audience = ref([
    { id: 1, img: '../assets/1.jpg', name: '张三', banLevel: 0, timer: null, countText: '' },
    { id: 2, img: '../assets/2.jpg', name: 'Liming', banLevel: 0, timer: null, countText: '' },
    { id: 3, img: '../assets/3.jpg', name: '王五', banLevel: 0, timer: null, countText: '' },
    { id: 4, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },
    { id: 5, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },
    { id: 6, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },
    { id: 7, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },
    { id: 8, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },
    { id: 9, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },
    { id: 10, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },
    { id: 11, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },
    { id: 12, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },
    { id: 13, img: '../assets/2.jpg', name: '赵六', banLevel: 0, timer: null, countText: '' },

])

// 互动
function sendMsg() {
    const txt = textarea.value.trim()
    if (!txt) return
    chatMessages.value.push({ name: '我', text: txt, banned: false })
    textarea.value = ''
}

// 踢出
const handleKick = (item) => {
    ElMessageBox.confirm(
        `确定要踢出观众“${item.name}”吗？`,
        '踢出确认',
        {
            confirmButtonText: '踢出',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            const index = audience.value.findIndex(v => v.id === item.id)
            if (index > -1) {

                const target = audience.value[index]
                if (target.timer) {
                    clearInterval(target.timer)
                    target.timer = null
                }
                audience.value.splice(index, 1)
            }
        })
        .catch(() => {

        })
}

// 时长阶梯（分钟）
const banMinutes = [1, 5, 15, 30]

// 禁言逻辑
const handleBan = (item) => {
    // 正在倒计时
    if (item.timer) return          
    // 计算本次禁言分钟
    const level = Math.min(item.banLevel, banMinutes.length - 1)
    const minutes = banMinutes[level]
    let leftSeconds = minutes * 60
    item.banLevel = Math.min(item.banLevel + 1, banMinutes.length - 1)
    // 立即显示一次
    item.countText = formatTime(leftSeconds)
    // 启动定时器
    item.timer = setInterval(() => {
        leftSeconds--
        if (leftSeconds <= 0) {
            clearInterval(item.timer)
            item.timer = null
        } else {
            item.countText = formatTime(leftSeconds)
        }
    }, 1000)
}
// 秒数转 mm:ss
const formatTime = (sec) => {
    const m = String(Math.floor(sec / 60)).padStart(2, '0')
    const s = String(sec % 60).padStart(2, '0')
    return `${m}:${s}`
}
</script>
<style scoped>
.live-data-container {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
}

.live-status {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.status-indicator {
    display: flex;
    font-weight: 700;
    font-size: 20px;
}

.real-time-data {
    width: 45%;
    height: 90px;
    padding: 20px;
    font-size: 16px;
    color: #333;
    background-color: rgb(247, 247, 247);
    border-radius: 10px;
}

.data-items {
    width: 45%;
    padding: 20px;
    font-size: 16px;
    color: #333;
    background-color: rgb(247, 247, 247);
    border-radius: 10px;
}

.data-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.data-item {
    padding-top: 20px;
    border-radius: 6px;

}

.data-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.audience-item {
    display: flex;
    flex-direction: column;
    padding: 0 8px;



}

.avatar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px double #c0c4cc;
    padding: 2px;


}

.img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.data-value {
    font-size: 18px;
    color: #333;
    font-weight: 700;
}

.bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.left {
    width: 67%;
    height: 300px;
    padding: 20px;
    font-size: 16px;
    color: #333;
    background-color: white;
    border-radius: 10px;

}

.right {
    width: 25%;
    height: 300px;
    padding: 20px;
    font-size: 16px;
    color: #333;
    background-color: white;
    border-radius: 10px;
}

.chat-list {
    height: 75%;
    overflow-y: auto;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8;
}


.chat-item {
    margin-bottom: 6px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8;
    overflow-y: hidden;
}

.uname {
    font-weight: 600;
}

.ucont {
    color: #333;
}

.viewer-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 10px;
    font-size: 13px;
    line-height: 2;
    height: 95%;
}

.viewer-item {
    padding: 2px 0;
}
</style>